<template>
  <el-drawer v-model="drawer" title="订单详情" :direction="direction" :before-close="beforeClose" :size="size">
    <div class="orderdesc">
      <!-- 列表展示 -->
      <div class='header'>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="订单编号" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入品牌名称"></el-input>
              </el-form-item>
              <el-form-item label="预定时间" label-width="100px">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1"
                    style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">至</el-col>
                <el-col :span="11">
                  <el-time-picker placeholder="选择时间" v-model="formInline.date2" style="width: 100%;"></el-time-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="下单人" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入"></el-input>
              </el-form-item>
              <el-form-item label="所属单位" label-width="100px">
                <el-input v-model="formInline.user" placeholder="输入"></el-input>
              </el-form-item>
              <el-form-item label="汇总状态" label-width="100px">
                <el-select v-model="formInline.region" placeholder="全部">
                  <el-option label="全部" value="shanghai"></el-option>
                  <el-option label="未汇总" value="shanghai"></el-option>
                  <el-option label="已汇总" value="beijing"></el-option>
                </el-select>
              </el-form-item>

            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 表格展示数据 -->
      <div class="list-content">
        <el-table :data="tableData" border style="width: 100%"
          :header-cell-style="{ background: '#fafafa', color: '#333', textAlgin: 'center' }">
          <el-table-column prop="title" label="产品名称">
          </el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="guige" label="规格"></el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column prop="sum" label="小计（元）"></el-table-column>
        </el-table>
      </div>

    </div>
  </el-drawer>
</template>

<script setup>
import { ref, onMounted, watch, computed,reactive,getCurrentInstance } from 'vue';
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
import { useisCollapseStore } from '@/store/modules/collapse'
const isCollapseStore = useisCollapseStore()
const router = useRouter();
//全局导入
const cxt = getCurrentInstance()
const API = cxt.appContext.config.globalProperties.$API
// 响应式变量
const formInline = reactive({
  user: '',
  date1: '',
  region: '',
  date2: ''
})
const tableData = reactive([])
const menu = ref(200)
const size = ref('90%');
const width = ref('');
onMounted(() => {
  detail()
  //抽屉的宽度
  const clientWidth = document.documentElement.clientWidth;
  width.value = clientWidth;
  menu.value = 200;
  size.value = clientWidth - menu.value - 10 + 'px';
})
//请求订单详情
const detail = async() => {
  const result = await API.detail()
  // console.log(result);
  if (result.status == 200) {
    tableData.push(...result.result.list)
 }
}
//抽屉
const drawer = ref(false)
const direction = ref('rtl');
//关闭抽屉
const beforeClose=()=>{
  drawer.value = false;
}
// 监听 isCollapse 的变化,获取 isCollapse 的计算属性
const isCollapse = computed(() => isCollapseStore.isCollapse);
// 定义一个响应式变量，用于存储 isCollapse 的值
const isCollapseValue = ref(isCollapse.value);
// 监听 isCollapse 的变化
watch(isCollapse, (newValue) => {
  isCollapseValue.value = newValue;
  // console.log('isCollapse 发生变化:', newValue);
  newValue ? menu.value = 64 : menu.value = 200;
  size.value = width.value - menu.value - 10 + 'px';
});

defineExpose({
  drawer
})
</script>

<style lang="less" scoped>
.orderdesc {
  padding: 10px;
  margin: 20px;
}

.header {
  margin-top: 20px;

  .el-form--inline .el-form-item {
    margin-right: 20px;
  }
}
</style>